<template>
  <div>
    <div class="header-img">
      <span class="header-arrow" @click="go">
        <van-icon color="rgba(0,0,0,.2)" name="arrow-left" />
      </span>
      <img :src="detail.sysCourse.handcover" alt="">
    </div>
    <div class="course-detail-m">
      <div class="course-detail">课程名称: {{detail.sysCourse.courseName}}</div>
      <div class="course-detail">课程价格: <span style="color: #ff4444">￥{{detail.sysCourse.price}}</span></div>
      <div class="course-detail">课程简介: </div>
      <div style="text-indent: 1em" v-html="detail.sysCourse.introduction"></div>
    </div>
    <div style="height: 50px"></div>
    <van-submit-bar
      :price="price"
      button-text="立即支付"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
    export default {
      name: 'order-payment',
      data() {
        return {
          orderId: '',
          detail: '',
          price: 0,
          orderPay: {}
        }
      },
      mounted() {
        this.orderId = this.$route.query.orderId
        this.orderDetail()
      },
      methods: {
        orderDetail() {
          this.$post('/api/order/findByOrderId', this.$qs.stringify({orderId: this.orderId})).then((res) => {
            if (res.code === 0) {
              this.detail = res.data
              this.price = res.data.sysCourse.price * 100
            }
          })
        },
        onSubmit() {
          this.$post('/api/pay/createOrderJSAPI', {
            outTradeNo: this.orderId,
            openid: localStorage.getItem('openId')
          }).then((res) => {
            // this.orderPay = res
            // if (typeof WeixinJSBridge === 'undefined'){
            //   if (document.addEventListener) {
            //     document.addEventListener('WeixinJSBridgeReady', this.pay, false)
            //   } else if (document.attachEvent) {
            //     document.attachEvent('WeixinJSBridgeReady', this.pay)
            //     document.attachEvent('onWeixinJSBridgeReady', this.pay)
            //   }
            // } else {
            //   this.pay(res)
            // }
          })
        },
        pay(data) {
          // let _this = this
          // WeixinJSBridge.invoke(
          //   'getBrandWCPayRequest', {
          //     'appId': data.appId, // 公众号名称，由商户传入
          //     'timeStamp': data.timeStamp, // 时间戳，自1970年以来的秒数
          //     'nonceStr': data.nonceStr, // 随机串
          //     'package': data.packageValue,
          //     'signType': data.signType, // 微信签名方式：
          //     'paySign': data.paySign // 微信签名
          //   },
          //   function(res) {
          //     if (res.err_msg === 'get_brand_wcpay_request:ok') {
          //       // 使用以上方式判断前端返回,微信团队郑重提示：
          //       // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          //       _this.checkPayStatus()
          //     }
          //   }
          // )
        },
        checkPayStatus() {
          this.$get('/api/pay/queryOrder', {outTradeNo: this.orderId}).then((res) => {
            if (res.data === '支付成功') {
              window.location.href = 'http://mobile.xyz-class.com/index/my-order'
            }
          })
        },
        go() {
          this.$router.go(-1)
        }
      }
    }
</script>

<style scoped>
  .course-detail-m{
    font-size: 28px;
    margin: 30px;
  }
  .course-detail{
    margin: 5px 0;
  }
  .header-img{
    width: 100%;
    height: 480px;
  }
  .header-img img{
    width: 100%;
    height: 100%;
  }
  .header-arrow{
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    background: rgba(255,255,255,.3);
  }
  .btn-danger{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
  }
</style>
